<%@ page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="html" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<html:head />
<link rel="stylesheet" type="text/css"
	href="../../public/css/admin_content.css">
<script type="text/javascript"
	src="../../public/js/jquery-1.6.2.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Quản lý nhà cung cấp</title>
</head>
<body>
	<h1>Quản lý nhà cung cấp</h1>
	<div id="options">
		<a id="showList" href="#">&nbsp;&nbsp;&nbsp;Danh sách nhà cung
			cấp&nbsp;&nbsp;&nbsp;</a> <a id="showForm" href="#">&nbsp;&nbsp;&nbsp;Thêm
			nhà cung cấp&nbsp;&nbsp;&nbsp;</a>
	</div>
	<br />

	<!-- Table danh sách nhà cung cấp-->
	<div id="list">
		<div class="title">Danh sách nhà cung cấp</div>
		<div class="content" align="center">
			<table border="1">
				<tr>
					<th>Số thứ tự</th>
					<th>Tên nhà cung cấp</th>
					<th>Địa chỉ</th>
					<th>Email</th>
					<th>Số điện thoại</th>
					<th>Mã</th>
					<th>Thao tác</th>
				</tr>
				<html:iterator value="supplierList" var="supplier" status="itStatus">
					<tr id="<html:property value="id"/>">
						<td align="center"><html:property value="#itStatus.Count" /></td>
						<td><html:property value="name" /></td>
						<td><html:property value="address" /></td>
						<td><html:property value="email" /></td>
						<td><html:property value="phone" /></td>
						<td><html:property value="id" /></td>
						<td align="center"><a class="operation"
							href="deleteSupplier?id=<html:property value="id"/>">&nbsp;Xóa&nbsp;</a>&nbsp;-&nbsp;<a
							class="operation" name="edit" id=<html:property value="id"/>
							href="#">&nbsp;Sửa&nbsp;</a></td>
					</tr>
				</html:iterator>
			</table>
		</div>
	</div>

	<!-- Thêm nhà cung cấp -->
	<div id="formAdd">
		<div class="title">Thêm nhà cung cấp</div>
		<div class="content" align="center">
			<html:form action="addSupplier" method="post" validate="true">
				<html:textfield cssClass="textfield" label="Tên nhà cung cấp"
					required="true" id="sup1" name="supplier.name" size="50" />
				<html:textfield cssClass="textfield" label="Địa chỉ" required="true"
					id="sup2" name="supplier.address" size="50" />
				<html:textfield cssClass="textfield" label="Email"
					name="supplier.email" required="true" id="sup3" size="50" />
				<html:textfield cssClass="textfield" label="Số điện thoại"
					required="true" id="sup4" name="supplier.phone" size="50" />
				<html:submit id="button" value="Thêm mới" />
			</html:form>
		</div>
	</div>

	<!-- Sửa thông tin nhà cung cấp -->
	<div id="formEdit">
		<div class="title">Sửa thông tin nhà sản xuất</div>
		<div class="content" align="center">
			<html:form action="editSupplier" method="post" validate="true">
				<html:hidden id="idEditTextfield" name="supplier.id" />
				<html:textfield cssClass="textfield" id="nameEditTextfield"
					required="true" label="Tên nhà cung cấp" name="supplier.name"
					size="50" />
				<html:textfield cssClass="textfield" id="addressEditTextfield"
					required="true" label="Địa chỉ" name="supplier.address" size="50" />
				<html:textfield cssClass="textfield" id="emailEditTextfield"
					required="true" label="Email" name="supplier.email" size="50" />
				<html:textfield cssClass="textfield" id="phoneEditTextfield"
					required="true" label="Số điện thoại" name="supplier.phone"
					size="50" />
				<html:submit id="button" value="Cập nhật" />
			</html:form>
		</div>
	</div>

	<!-- Javascript -->
	<script>
		$(document).ready(function() {
			$("#formEdit").css("display", "none");
			$("#formAdd").css("display", "none");
			$("#showList").css("border-style", "inset");

			$("#showForm").click(function() {
				$(this).css("border-style", "inset");
				$("#showList").css("border-style", "outset");
				$("#list").hide("fast");
				$("#formEdit").hide("fast");
				$("#formAdd").show("fast");
				$("#sup1").val("");
				$("#sup2").val("");
				$("#sup3").val("");
				$("#sup4").val("");
			});

			$("#showList").click(function() {
				$(this).css("border-style", "inset");
				$("#showForm").css("border-style", "outset");
				$("#formAdd").hide("fast");
				$("#formEdit").hide("fast");
				$("#list").show("fast");
			});

			var valueArray = new Array();

			$("a").click(function() {
				if ($(this).attr("name") == "edit") {
					var id = $(this).attr("id");
					$('#' + id + ' td').each(function(index) {
						valueArray[index] = $(this).text();
					});

					$("#idEditTextfield").val(id);
					$("#nameEditTextfield").val(valueArray[1]);
					$("#addressEditTextfield").val(valueArray[2]);
					$("#emailEditTextfield").val(valueArray[3]);
					$("#phoneEditTextfield").val(valueArray[4]);
					$("#showList").css("border-style", "outset");
					$("#list").hide("fast");
					$("#formEdit").show("fast");
				}
			});
		});
	</script>
</body>
</html>